<template>
  <view class="withdrawal p-20">
    <view class="my-card">
      <u-form ref="formRef" :model="form" label-position="top" label-width="200">
        <u-form-item label="提现金额" prop="amount" required>
          <u-input v-model="form.amount" border="bottom" placeholder="请输入提现金额" type="digit">
            <template #prefix>￥</template>
            <template #suffix>
              <view @click.stop="handleSelectAll">
                <u-text type="primary" text="全部提现"></u-text>
              </view>
            </template>
          </u-input>
        </u-form-item>
        <u-text
          type="info"
          :text="`可提现金额:￥${Number(userStore.riderInfo.rider_amount_total).toFixed(2)}`"
        ></u-text>
        <u-form-item label="提现方式" prop="method" required>
          <u-radio-group v-model="form.method">
            <u-radio label="微信" name="wechatpay"></u-radio>
            <u-radio label="银行卡" name="bank"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-text
          v-if="form.method == 'wechatpay' && userStore.isBindWechat"
          :text="`提现至微信：${userStore.wechatInfo.nickname}`"
          type="info"
        ></u-text>
        <u-text
          v-if="form.method == 'bank' && userStore.isBindBankcard"
          :text="`提现至银行卡：${userStore.bankcardList[0].acc_number}`"
          type="info"
        ></u-text>
      </u-form>
    </view>
    <u-button class="mt-20" type="primary" shape="circle" @tap="handleWithdrawal">立即提现</u-button>
  </view>
</template>

<script setup>
  import { onReady } from "@dcloudio/uni-app";
  import { reactive, ref } from "vue";
  import { useWalletStore } from "../../store/wallet";
  import { useUserStore } from "../../store/user";
  import { format } from "prettier";

  const userStore = useUserStore();

  const walletStore = useWalletStore();

  const formRef = ref();

  const form = reactive({
    amount: "",
    method: "wechatpay",
  });

  const rules = {
    amount: [
      { required: true, message: "请输入提现金额", trigger: ["change"] },
      {
        validator: (rule, value, callback) => {
          if (Number(value) > Number(userStore.riderInfo.rider_amount_total)) {
            return callback("不能大于可提现金额");
          }
          return callback();
        },
        trigger: ["change"],
      },
    ],
    method: [
      {
        validator: (rule, value, callback) => {
          if (value == "wechatpay") {
            if (!userStore.isBindWechat) {
              return callback("未绑定微信");
            }
          }
          if (value == "bank") {
            if (!userStore.isBindBankcard) {
              return callback("未绑定银行卡");
            }
          }
          return callback();
        },
        trigger: ["change"],
      },
    ],
  };

  function handleSelectAll() {
    console.log("d");
    form.amount = Number(userStore.riderInfo.rider_amount_total).toFixed(2);
  }

  async function handleWithdrawal() {
    const result = await formRef.value.validate();
    if (result) {
      if (form.method == "bank") {
        form.bank_id = userStore.bankcardList[0].id;
      }
      await walletStore.fetchWithdrawal(form);
      uni.navigateBack();
    }
  }

  onReady(() => {
    formRef.value.setRules(rules);
  });
</script>

<style lang="scss" scoped>
  .u-radio {
    margin-right: 20rpx;
  }
</style>
